<template>
  <div class="Progress-neg-container">
    <div class="language-select">
      <div class="title">Traveller Type</div>
      <div style="display: flex; align-items: end">
        <div>
          <CustomDropdownc
            v-model="selectedTraveller"
            :options="travellerOptions"
            @change="handleLanguageChange"
            prefix-text="Traveller type"
          />
        </div>
      </div>
    </div>
    <div class="chart-container">
      <PieChart :option="TraChartOptions" :height="'1.4375rem'"></PieChart>
    </div>
  </div>
</template>

<script>
import CustomDropdownc from "./CustomDropdownc.vue";
import PieChart from "@components/common/PieChart.vue";
export default {
  components: {
    PieChart,
    CustomDropdownc,
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      selectedDate: "",
      selectedTraveller: "", // 用于存储选中的值
      travellerOptions: [
        // 定义选项列表
        { value: "solo", label: "Solo" },
        { value: "family", label: "Family" },
        { value: "business", label: "Business" },
      ],
      TraChartOptions: {
        grid: {
          top: "10%",
          left: 5,
          right: "5%",
          bottom: "15%",
          containLabel: true,
        },

        legend: {
          show: true,
          data: ["Solo", "Family", "Business"],
          top: "bottom",
          left: "center",
          padding: [5, 25],
          itemGap: 20,
          icon: "circle",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#6a6969",
            fontSize: 12,
            fontWeight: 400,
          },
        },

        xAxis: {
          boundaryGap: false,
          type: "category",
          data: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "June",
            "July",
            "Aug",
            "Sept",
            "Oct",
            "Nov",
            "Dec",
          ],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#232323",
            fontSize: 10,
            fontWeight: 400,
          },
        },
        yAxis: [
          {
            offset: 5, // 正值向右移动，负值向左
            type: "value",
            axisLabel: {
              align: "right",
              margin: 30, // 增加左边距防止重
              color: "#454545",
              fontSize: 10,
              overflow: "truncate",
              fontWeight: 400, // 可选：加粗（normal/bold）
            },
            name: "#of reviews",
            nameTextStyle: {
              color: "#454545", // 名称字体颜色（例如红色）
              fontSize: 10, // 名称字体大小
              fontWeight: 400, // 可选：加粗
              align: "right",
              verticalAlign: "middle",
              rotate: 270,
              padding: [0, 0, 0, 20],
            },
            min: 0,
            max: 1000,
            interval: 250,
            position: "left",
            splitLine: {
              show: false,
            },
          },
        ],

        // 数据系列
        series: [
          {
            name: "Solo", // 与legend.data对应
            stack: "演示柱状图",
            barCategoryGap: "150%",
            rich: {
              dot: {
                backgroundColor: (params) => params.color, // 圆点颜色继承柱子颜色
                width: 10,
                height: 10,
                borderRadius: 50,
                margin: "0 auto 2px",
              },
            },
            barWidth: 30, // 柱子宽度
            barGap: "0%",
            data: [600, 300, 600, 200, 300, 300, 230, 690, 200, 600, 230, 63],
            type: "bar",
            smooth: true,
            showSymbol: false,
            borderRadius: [20, 50, 0, 0], // 顶部左右圆角
            itemStyle: {
              color: "#6D03A1",
              borderRadius: [4, 4, 4, 4],
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
          {
            name: "Family", // 与legend.data对应
            stack: "演示柱状图",
            borderRadius: [2.76, 2.76, 0, 0], // 顶部左右圆角
            data: [200, 300, 100, 150, 300, 200, 230, 300, 186, 190, 230, 600],
            type: "bar",
            smooth: true,
            showSymbol: false,
            itemStyle: {
              color: "#A601F1",
              borderRadius: [4, 4, 4, 4],
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
          {
            name: "Business", // 与legend.data对应
            stack: "演示柱状图",
            borderRadius: [2.76, 2.76, 0, 0], // 顶部左右圆角
            data: [600, 150, 100, 200, 600, 190, 150, 966, 102, 150, 230, 630],
            type: "bar",
            smooth: true,
            showSymbol: false,
            label: {
              show: true,
              position: "top", // 显示在柱子顶部
              formatter: "●", // 使用 Unicode 圆点符号
              color: "#cdcccc", // 圆点颜色
              fontSize: 8, // 圆点大小
              offset: [0, 2], // 微调位置（可选）
            },
            itemStyle: {
              color: "#BD8DF0",
              borderRadius: [4, 4, 4, 4],
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
        ],
      },
    };
  },
  methods: {
    handleLanguageChange(lang) {
      console.log("下拉框选中的值是", lang);
    },
  },
};
</script>

<style scoped lang="scss">
.Progress-neg-container {
  background: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  //   justify-content: space-between;
  //   margin-top: 32px;
  // width: 3.8958rem;
  //   width: 3.8958rem;
  //   height:1.7569rem;
  padding: 16px 24px;
  border-radius: 8px;
  border: 1px solid #cdcccc;
  .title {
    font-size: 18px;
    color: #454545;
    font-weight: 600;
  }
  .language-select {
    display: flex;
    // align-items: center;
    justify-content: space-between;
  }
}
::v-deep .language-selector .custom-dropdown .dropdown-toggle {
  border: none !important;
  padding: 0;
  height: 17px;
  background-color: none;
  justify-content: space-between;
  width: 136px;
}
</style>